<template>
  <div class="chart"></div>
</template>

<script setup name="Thermometer">
// 温度计
import * as echarts from 'echarts'
import useResize from '@/components/Charts/hooks/useResize.js'

const imgUrl = new URL('@/assets/images/wendubg.png', import.meta.url).href

const { proxy } = getCurrentInstance()

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        title: '室内温度',
        status: '室内温度',
        value: 36,
        color: '#017CFF'
      }
    }
  }
})

let chartInstance = null

function chartInit() {
  const ipvalue = proxy.options.value

  chartInstance = echarts.init(proxy.$el)

  chartInstance.setOption({
    title: {
      x: '16%',
      y: '80%',
      show: true,
      text: props.options.title,
      textStyle: {
        fontWeight: 400,
        color: '#343434',
        fontSize: 14
      }
    },
    grid: {
      left: '25%',
      right: '0',
      bottom: '30%',
      top: '0',
      containLabel: true
    },
    yAxis: [
      {
        show: false,
        data: [],
        min: 0,
        max: 135,
        axisLine: {
          show: false
        }
      },
      {
        show: false,
        min: 0,
        max: 50
      },
      {
        type: 'category',
        position: 'left',
        offset: -80,
        axisLabel: {
          fontSize: 10,
          color: '#000'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    xAxis: [
      {
        show: false,
        min: -10,
        max: 80,
        data: []
      },
      {
        show: false,
        min: -10,
        max: 80,
        data: []
      },
      {
        show: false,
        min: -10,
        max: 80,
        data: []
      },
      {
        show: false,
        min: -5,
        max: 80
      }
    ],
    series: [
      {
        name: '条',
        type: 'bar',
        // 对应上面XAxis的第一个对)象配置
        xAxisIndex: 0,
        data: [
          {
            value: ipvalue + 10, // 这个改那个颜色刻度的
            label: {
              show: true,
              position: [20, 0],
              backgroundColor: {
                image: imgUrl
              },
              width: 50,
              height: 25,
              formatter: '{back| ' + ipvalue + ' }{unit|°C}',
              rich: {
                back: {
                  align: 'center',
                  fontSize: 16,
                  color: '#000'
                },
                unit: {
                  fontSize: 13,
                  lineHeight: 30,
                  color: '#000'
                }
              }
            }
          }
        ],

        barWidth: 10,
        itemStyle: {
          borderRadius: 8,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
            { offset: 0, color: '#00C6FF' },
            { offset: 0.9, color: props.options.color }
          ])
        },
        z: 2
      },
      {
        name: '白框',
        type: 'bar',
        xAxisIndex: 1,
        barGap: '-100%',
        data: [134],
        barWidth: 14,
        itemStyle: {
          color: '#FFF',
          borderRadius: 8
        },
        z: 1
      },
      {
        name: '外框',
        type: 'bar',
        xAxisIndex: 2,
        barGap: '-100%',
        data: [135],
        barWidth: 18,
        itemStyle: {
          color: '#C9CAC4',
          borderRadius: 10
        },
        z: 0
      },
      {
        name: '圆',
        type: 'scatter',
        emphasis: {
          scale: false
        },
        data: [0],
        xAxisIndex: 0,
        symbolSize: 20,
        itemStyle: {
          color: props.options.color,
          opacity: 1
        },
        z: 2
      },
      {
        name: '白圆',
        type: 'scatter',
        emphasis: {
          scale: false
        },
        data: [0],
        xAxisIndex: 1,
        symbolSize: 26,
        itemStyle: {
          color: '#fff',
          opacity: 1
        },
        z: 1
      },
      {
        name: '外圆',
        type: 'scatter',
        emphasis: {
          scale: false
        },
        data: [0],
        xAxisIndex: 2,
        symbolSize: 30,
        itemStyle: {
          color: '#C9CAC4',
          opacity: 1
        },
        z: 0
      }
    ]
  })
}

onMounted(() => {
  chartInit()
})
// 销毁
onBeforeUnmount(() => {
  chartInstance?.dispose()
})

watch(
  () => props.options,
  () => {
    nextTick(() => {
      chartInit()
    })
  }
)

function resize() {
  chartInstance.resize()
}

useResize(() => {
  resize()
})
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
